<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"> 

<h:head></h:head> 
<body>
    <rich:panel>
        <f:facet name="header">
        Write your own custom rich components with built-in AJAX support
        </f:facet>
        
        
        				<h:form>
	

		<rich:extendedDataTable id="tbl_lista_contactos" var="objc"
			value="#{contactosBean.listContacts}">
			<f:facet name="noData">No existen contactos</f:facet>
			<rich:column>
				<f:facet name="header">
					<h:outputLabel value="Nombre" />
				</f:facet>
				<h:outputText value="#{objc.nombre}" />
			</rich:column>

			<rich:column>
				<f:facet name="header">
					<h:outputLabel value="E-Mail" />
				</f:facet>
				<h:outputText value="#{objc.mail}" />
			</rich:column>

			<rich:column>
				<f:facet name="header">
					<h:outputLabel value="Celular" />
				</f:facet>
				<h:outputText value="#{objc.telefono}" />
			</rich:column>
			
			<rich:column>
				<f:facet name="header">
					<h:outputLabel value="Opciones" />
				</f:facet>
					
				<a4j:commandLink value="Eliminar" oncomplete="#{rich:component('popupEliminar')}.show();" render="popEliminar">
					<f:setPropertyActionListener target="#{contactosBean.contact}" value="#{objc}"/>
				</a4j:commandLink>
		        	
			</rich:column>
		</rich:extendedDataTable>
	<!-- ///////////////////////////////////////////////////////////////////////////////////    -->



		<a href="#modalEditar">Abrir modal</a>
		<div id="modalEditar" class="modalmask">
			<div id="contenido_modal" class="modalbox movedown">
				<a href="#close" title="Close" class="close">X</a>
			   
			    
				<h:commandButton value="Aceptar" actionListener="#{contactosBean.editarContacto()}">
								
				
				</h:commandButton>			    
			</div>
		</div>


	
	</h:form>
         
	</rich:panel>

        <h:form id="popEliminar">

	
		<rich:popupPanel id="popupEliminar" modal="true" resizeable="true" onmaskclick="#{rich:component('popupEliminar')}.hide()">
	        <f:facet name="header">
            <h:outputText value="Eliminar" />
        </f:facet>
        <f:facet name="controls">
            <h:outputLink value="#" onclick="#{rich:component('popupEliminar')}.hide(); return false;">
                X
            </h:outputLink>
        </f:facet>
        
        
        
        
        
        <p>Esta seguro que desea eliminar.</p>
        	<p> este contacto....</p>
 
              <a4j:commandButton value="Si" action="#{contactosBean.eliminarcontacto}" execute="popupEliminar"
					/>
        	  <h:commandButton value="No" onclick="#{rich:component('popupEliminar')}.hide(); return false;"/>
    </rich:popupPanel>
			
		</h:form>       
	
	
</body> 
</html>
